import React from 'react';
import {Button, Card, Checkbox, Form, Input, message} from "antd";
import logo from '@/assets/logo.png'
import './index.scss'
import {useStore} from "@/store";
import {useNavigate} from 'react-router-dom'

const Login = () => {
    const {loginStore} = useStore()
    const navigate = useNavigate()
    const onFinish = async (values) => {
        // console.log(values)
        // values:放置的是所有表单项中用户输入的内容
        // todo:登录
        const {mobile, code} = values
        try {
            await loginStore.getToken({mobile, code})
            //跳转首页
            navigate('/', {replace: true})
            //提示用户
            message.success('登录成功!')
        } catch (e) {
            message.error(e.response?.data?.message || '登录失败!')
        }
    }

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }

    return (
        <div className="login">
            <Card className="login-container">
                <img className="login-logo" src={logo} alt=""/>
                {/*登录表单*/}
                {/*子项用到的触发事件需要在Form中都声明一下才可以*/}
                <Form
                    validateTrigger={['onBlur', 'onChange']}
                    initialValues={{
                        remember: true,
                        mobile: '13811111111',
                        code: '246810'
                    }}
                    labelCol={{span: 4}}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        name="mobile"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号!'
                            },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '请输入正确的手机号',
                                validateTrigger: 'onBlur'
                            }
                        ]}
                        label="手机号" colon={false}>
                        <Input size="large" placeholder="请输入手机号"/>
                    </Form.Item>

                    <Form.Item
                        name="code"
                        rules={[
                            {
                                required: true,
                                message: '请输入验证码!'
                            },
                            {
                                len: 6,
                                message: '请输入6位验证码',
                                validateTrigger: 'onBlur'
                            }
                        ]}
                        label="验证码" colon={false}>
                        <Input size="large" placeholder="请输入验证码"/>
                    </Form.Item>
                    <Form.Item
                        valuePropName="checked"
                        name="remember">
                        <Checkbox className="login-checkbox-label">
                            我已阅读并同意「用户协议」和「隐私条款」
                        </Checkbox>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" size="large" block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
};

export default Login;